<template>
  <div>
    <el-form class="m7-form accessForm" :rules="rules"
      size="mini" :model="accessForm"
      ref="accessForm" label-position="top">
      <el-form-item prop="name">
        <span slot="label">
          SDK名称
          <el-tooltip placement="top">
            <div slot="content">用于区别APP访客，不会展示给客户</div>
            <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
          </el-tooltip>
        </span>
        <el-input v-model.trim="accessForm.name" placeholder="请输入SDK名称" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="会话流程" prop="processId">
        <m7Select filterable
         v-model="accessForm.processId"
         size="mini" :options="processData"
         :defaultProps="{value: '_id', label: 'name'}"
         placeholder="请选择">
        </m7Select>
      </el-form-item>
      <el-form-item label="样式" prop="sdkCssTmpId">
        <m7Select filterable
         v-model="accessForm.sdkCssTmpId"
         size="mini" :options="cssListData"
         :defaultProps="{value: '_id', label: 'name'}"
         placeholder="请选择">
        </m7Select>
      </el-form-item>
      <el-form-item label="满意度评价" prop="isSatisfaction">
        <el-switch
          v-model="accessForm.isSatisfaction"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </el-form-item>
      <el-form-item label="AccessId" prop="accessId" v-if="accessForm._id">
        <el-input v-model.trim="accessForm.accessId" size="mini" :disabled="true">
          <i slot="suffix" class="V7_iconfont V7_iconV7tubiao_fuzhi" @click="copyText(accessForm.accessId)"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="openAssistance">
        <span slot="label">
          启用智能辅助
        </span>
        <el-switch
          v-model="accessForm.isEnableRobotAssist"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import { deepClone } from '@/utils/common'
import Clipboard from 'clipboard-js'
interface AccessForm {
  name: string
  processId: string
  _id?: string
  isSatisfaction: boolean
  satisfactionId: string
  accessId?: string
  sdkCssTmpId: string
  isEnableRobotAssist: boolean // 启用智能辅助
}
const accessFormTem = {
  name: '',
  processId: '',
  sdkCssTmpId: '',
  isSatisfaction: false,
  satisfactionId: '',
  isEnableRobotAssist: false
}
@Component({
  name: 'sdkAccessAddOrEdit'
})
export default class SdkAccessAddOrEdit extends Vue {
  private $store: any
  private $message: any

  get processData () {
    return this.$store.state.common.publicCache.processList || []
  }

  get cssListData () {
    return this.$store.state.common.publicCache.sdkCssList || []
  }

  private rules = {
    name: [{ required: true, trigger: 'blur', message: '请输入SDK名称' }],
    processId: [{ required: true, trigger: 'change', message: '请选择会话流程' }],
    sdkCssTmpId: [{ required: true, trigger: 'change', message: '请选择样式' }]
  }

  public accessForm: AccessForm = {
    name: '',
    processId: '',
    sdkCssTmpId: '',
    isSatisfaction: false,
    satisfactionId: '',
    isEnableRobotAssist: false
  }

  public setAccessData (data?: any) {
    if (data) {
      const { name, processId, _id, isSatisfaction, satisfactionId, accessId, sdkCssTmpId, isEnableRobotAssist } = data
      this.accessForm = {
        _id,
        name,
        processId,
        accessId,
        sdkCssTmpId,
        isSatisfaction: isSatisfaction === undefined ? false : isSatisfaction,
        satisfactionId: satisfactionId || this.accessForm.satisfactionId,
        isEnableRobotAssist
      }
    } else {
      this.accessForm = deepClone(accessFormTem)
    }
  }

  private copyText (content: string) { // 复制
    Clipboard.copy(content).then(() => {
      this.$message.success('复制成功')
    }).catch(() => {
      this.$message.error('复制失败')
    })
  }
}
</script>
<style lang="stylus" scoped>
  .tooltip
    font-size 12px
    color #B3B9C7
    cursor pointer
  .V7_iconfont
    color $icon-gray
    cursor pointer
    padding-right 4px
    font-size 14px
    &:hover
      color $c-main
  .tip-span
    font-size 12px
    color #B3B9C7
    cursor pointer
</style>
